<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .USstocks-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .USstocks-info {
          margin:0 0.32rem 0.24rem;
          padding-top: 0.86rem;
      }
      .USstocks-info .USstocks-info-img {
        width: 6.86rem;
        height: 2.4rem;
        /* background: pink; */
        position: relative;
        margin-bottom: 0.3rem;
      }
      .USstocks-info-img span:nth-child(1){
        position: absolute;
        display: block;
        width: 0.72rem;
        height: 0.36rem;
        line-height: 0.36rem;
        left: 0;
        top: 0.2rem;
        background: #C7000B;
        border-radius: 0 100px 100px 0;
        font-family: PingFangSC-Regular;
        font-size: 0.22rem;
        color: #FFFFFF;
        letter-spacing: 0;
        padding-left: 0.1rem;
      }
      .USstocks-info-img img {
          width: 6.86rem;
          height: 2.4rem;
      }
      .USstocks-info-img .count{
        position: absolute;
        bottom: 0.24rem;
        right: 0.24rem;
        width: 0.6rem;
        height: 0.32rem;
        opacity: 0.7;
        background: #000000;
        border-radius: 0.04rem;
        border-radius: 0.04rem;
        font-family: PingFangSC-Regular;
        font-size: 0.22rem;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
      }
      .USstocks-list {
        margin:0 0.32rem;
      }
      .USstocks-list-content {
        width: 100%;
      }
      .USstocks-list-content ul{
        list-style: none;
        padding: 0;
        margin: 0;
        padding-top: 0.36rem;
        padding-bottom: 0.48rem;
      }
      .USstocks-list-content ul li{
        overflow: hidden;
      }

      .USstocks-list-content ul li .content-left{
        float: left;
      }
      .content-left-litterText span:nth-child(1){
        margin-right: 0.28rem;
      }
      .USstocks-list-content ul li .content-right{
        float: right;
        width: 2.12rem;
        height: 1.3rem;
        /* background: pink; */
      }
      .USstocks-list-content ul li .content-right img{
        width: 2.12rem;
        height: 1.3rem;
      }
      /*  */
  .USstocks-header {
    padding:0.22rem 0.32rem;
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
  }
  .USstocks-info-title {
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.44rem;
    margin-bottom: 0.26rem;
  }
  .USstocks-info-content {
    font-family: PingFangSC-Regular;
    font-size: 0.26rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.4rem;
    margin-bottom: 0.22rem;
    word-break: break-all;
  }
  .USstocks-info-count {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.34rem;
    margin-bottom: 0.24rem;
  }
  .USstocksblank {
    height: 0.14rem;
}
.USstocks-list-content ul .solidLi{
  width: 100%;
  height: 0.02rem;
  margin-top: 0.34rem;
  margin-bottom: 0.34rem;
}
.content-left-main {
  width: 4.52rem;
  height: 0.88rem;
  font-size: 0.3rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  line-height: 0.44rem;
  margin-bottom: 0.42rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.content-left-litterText span {
  height: 0.34rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 0.34rem;
}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->
  <!-- 头部 -->
  <div class="USstocks-header">
      <img src="../../images/allPic/jiantou.png" alt="" onclick="closeWindow()" class="headerimg">
      专题详情
  </div>

  <!-- 专题内容 -->
  <div class="USstocks-info">
  </div>

  <!-- 留白 -->
  <div class="USstocksblank"></div>

  <!-- 专题列表 info-detail-recommend-->
  <div class="USstocks-list">
    <div class="USstocks-list-content">
        <ul>
        </ul>
    </div>
  </div>
</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let funcCode
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    // console.log(params)
    funcCode = params.funcCode

    //设置深色模式
    if(configColorType === '1'){
        $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
        $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }

    $('.USstocks-list-content ul').empty()
    getInfoList(params)
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    $('.USstocks-list-content ul').empty()
    pageNum = 1
    getInfoList({'pageNum':1,'funcCode':funcCode})
  }
  //获取某条专题的详情
  function getInfoList(params){
    Server.specialInfo.specialInfoList({'pageNum':pageNum,'pageSize':10,'funcCode':params.funcCode}).then(res => {
      $('.USstocks-info').empty()
      if(res.code === 0){
        let detail = res.project
        let list = res.project.informationListDtoList

        let top =
          `<div class="USstocks-info-img" style="background-image:url(${detail.coverImgUrl});background-size:cover;">
                <span>专题</span>
                <!--  <img src="${detail.coverImgUrl}" alt=""> -->
                <span class="count">${detail.articleCnt}篇</span>
            </div>
            <div class="USstocks-info-title">
                ${detail.funcName}
            </div>
            <div class="USstocks-info-content">
                ${detail.introduction?detail.introduction:''}
            </div>
            <div class="USstocks-info-count">
                共${detail.articleCnt}篇文章
            </div>`

            $('.USstocks-info').append(top)

        if(list.length !== 0){

            list.map((item,index) => {
            let creatTime = item.issuerDttm*1000
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
            let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30*60*1000){
              if(nowTime - creatTime < 1*60*1000){
                item.issuerDttm = '刚刚'
              }else{
                item.issuerDttm = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
              }
            }else if(nowTime - creatTime < 24*60*60*1000){
                if(nowTime-creatTime < 60*60*1000){
                  item.issuerDttm = '1小时前'
                }else {
                  item.issuerDttm = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                }
            }else if(new Date().getDate()-new Date(creatTime).getDate()==1 && new Date().getMonth()==new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.issuerDttm = '昨天'+hour+":"+minute
            }else{
              item.issuerDttm = year+'-'+month+'-'+day+' '+hour+':'+minute
            }
          })

          list.map((v,i) => {
            let li =
            `<li onclick="gozixunDetail({'infoId':'${v.infoId}','infoType':'${v.infoType}','funcCode':'${v.funcCode}'})">
                <div class="content-left">
                <div class="content-left-main" style="width:${v.coverImgUrl?'':'100%'}">${v.mainTitle}</div>
                <div class="content-left-litterText" style="width:${v.coverImgUrl?'':'100%'}">
                    <span>${v.issuerDttm}</span>
                </div>
                </div>
                <div class="content-right" style="display:${v.coverImgUrl?'block':'none'}">
                  <img src="${v.coverImgUrl}" alt="">
                </div>
            </li>
            <li class="solidLi"></li>`
            $('.USstocks-list-content ul').append(li)
          })
        }else{
          // jsBridge.toast('暂无数据')
          // return false
        }

      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
  //点击某一项跳转到资讯详情页面
  function gozixunDetail(params){
    // console.log(params)
    jsBridge.openWindow('/html/details/Information-details.html?infoId='+params.infoId+'&infoType='+params.infoType+'&funcCode='+params.funcCode+'&isopencomment=0',{}, {noBar: false})
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.USstocks-list-content ul').offset().top
    let height = $('.USstocks-list-content ul').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(top+height-maxHeight,'top+height-maxHeight')
    if(Math.round(top+height-maxHeight) === Math.round(scroll)){
      pageNum++
      getInfoList({'pageNum':pageNum,'funcCode':funcCode})
    }
  })
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
</script>
</html>
